<template>
  <div class="box">
    <div class="row-one">
      <section class="views" style="border-top-left-radius: 6px;">
        <img src="@/assets/drive.png" :class="{vague: !data}" />
      </section>
      <section class="grid">
        <div class="col">
          <div>位数</div>
          <div style="border-top-right-radius: 6px;">{{ data ? CpuBits2Val[data.cpuBits] : "" }}</div>
        </div>
        <div class="col">
          <div>版本</div>
          <div>{{ data ? data.version : "" }}</div>
        </div>
      </section>
    </div>
    <div class="row-two">
      <div class="col">
        <div>名称</div>
        <div>
          <a-tooltip :title="data ? data.fileName : ''">
            <span>{{ data ? data.fileName : "" }}</span>
          </a-tooltip>
        </div>
      </div>
      <div class="col">
        <div>变更履历</div>
        <div>
          <a-tooltip :title="data ? data.description : ''">
            <span>{{ data ? data.description : "" }}</span>
          </a-tooltip>
        </div>
      </div>
    </div>
    <a-button type="primary" size="small" :disabled="!data" block @click="download(data)">下载驱动</a-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Emit, Vue } from "vue-property-decorator";
import { CpuBits2Val } from "@/common/Enum2Val";

@Component({ name: "Panel" })
export default class Panel extends Vue {
  private CpuBits2Val: any = CpuBits2Val;

  @Prop({ type: Object }) data!: any;

  download(data: any) {
    if (data) {
      window.location.href = data.httpPath;
    }
  }
}
</script>

<style lang="less" scoped>
@btnHeight: 30px;
// 毛玻璃
.vague {
  filter: blur(3px);
}

.divMixin {
  &:first-child {
    width: 30%;
  }
  &:last-child {
    width: 70%;
    overflow: hidden;
  }
  height: 100%;
  border: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 13px;
    color: #333;
  }
}

.box {
  width: 100%;
  height: 208px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 3px #999;
  background-color: #fbfbfb;
  display: flex;
  flex-direction: column;
  &:hover {
    box-shadow: 0 0 10px #666;
  }
  .row-one {
    display: flex;
    width: 100%;
    height: 100px;
    .views {
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #d9d9d9;
      img {
        margin-top: 10px;
        width: 50%;
      }
    }
    .grid {
      width: 60%;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 6px 6px 0 0;
      .col {
        height: 50%;
        width: 100%;
        display: flex;
        & > div {
          .divMixin;
        }
      }
    }
  }
  .row-two {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    .col {
      height: 50%;
      width: 100%;
      display: flex;
      & > div {
        .divMixin;
      }
    }
    span {
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      white-space:nowrap;
      display:block;
    }
  }
}
</style>
